<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getDictType,
  getTrainingCourseById,
  getTrainingCourseStatus,
  scanCodeSignin
} from "../../api/training";

const id = ref('')
const detail = ref({})

onLoad((options) => {
  id.value = options.id
})

onShow(() => {
  getTrainingTypeLi().then()
  getHomeWork()
})

const trainingTypeLi = ref()

async function getTrainingTypeLi() {
  getDictType("training_format").then((res) => {
    trainingTypeLi.value = res.data.map((it) => {
      return { value: it.dictValue, label: it.dictLabel }
    })
    getDetail().then()
  })
}

const courseStatus = ref({})
function getHomeWork() {
  getTrainingCourseStatus(id.value as string).then(res => {
    courseStatus.value = res.data || {}
  })
}

async function getDetail() {
  if (!id.value) return
  const ret = await getTrainingCourseById(id.value as string)
  detail.value = ret.data
  const item = trainingTypeLi.value.find((ele) => ele.value === String(ret.data.trainingFormat))
  detail.value.trainingTypeName = item ? item.label : ''
}

function handleScan() {
  uni.scanCode({
    scanType: ['qrCode'],
    success: (res) => {
      scanCodeSignin(res.result).then(res => {
        uni.showToast({
          title: '签到成功',
        })
        getHomeWork()
      })
    },
    fail: (err) => {
      console.error('扫码失败', err)
    }
  })
}
</script>

<template>
  <view class="T_page">
    <view class="card">
      <view class="title">{{ detail.trainingTheme || '--' }}</view>
      <view class="items">
        <view>培训模块</view>
        <text>{{ detail.moduleTitle || '--' }}</text>
        <view>培训形式</view>
        <text>{{ detail.trainingTypeName }}</text>
        <view>培训专家</view>
        <text>{{ detail.trainingExpert || '--' }}</text>
        <view>单位</view>
        <text>{{ detail.unit || '--' }}</text>
        <view>职称/职务</view>
        <text>{{ detail.title || '--' }}</text>
        <view>培训学时</view>
        <text>{{ detail.classHour || '--' }}</text>
        <view>地点</view>
        <text>{{ detail.trainingAddress || '--' }}</text>
        <view>培训时间</view>
        <text>{{ detail.startTime }} {{ detail.endTime }}</text>
      </view>
    </view>

    <view class="items">
      <view @click="handleScan">
        <view>
          <image src="/static/svg/scan.svg" />
          <uni-tag :text="courseStatus.isSignin === 1 ? '已签到' : '未签到'" size="small" :type="courseStatus.isSignin === 1 ? 'success' : 'primary'" />
        </view>
        <text>扫码签到</text>
      </view>
      <view @click="uni.navigateTo({ url: '/pages/homeworkDetail/index?id=' + id + '&startTime=' + detail.startTime })" v-if="detail.isWork === 1">
        <view>
          <image src="/static/svg/book.svg" />
          <uni-tag :text="courseStatus.isSubWork === 1 ? '已提交' : '待提交'" size="small" :type="courseStatus.isSubWork === 1 ? 'success' : 'primary'" />
        </view>
        <text>课后作业</text>
      </view>
      <view @click="uni.navigateTo({ url: '/pages/questionnaire/index?id=' + id + '&startTime=' + detail.startTime })" v-if="detail.isQuestionnaire === 1">
        <view>
          <image src="/static/svg/questionnaire.svg" />
          <uni-tag :text="courseStatus.isSubQuestionnaire === 1 ? '已填写' : '待填写'" size="small" :type="courseStatus.isSubQuestionnaire === 1 ? 'success' : 'primary'" />
        </view>
        <text>问卷调查</text>
      </view>
      <view @click="uni.navigateTo({ url: '/pages/onlineCourse/index' })">
        <view>
          <image src="/static/svg/video.svg" />
        </view>
        <text>在线课程</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.T_page {
  >.card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    >.title {
      font-size: 32rpx;
      font-weight: bold;
    }

    >.items {
      margin-top: 30rpx;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14rpx 40rpx;
      font-size: 24rpx;

      >view {
        color: #6B7280;
      }

      >text {
        color: #111827;
      }
    }
  }

  >.items {
    margin-top: 30rpx;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28rpx;

    >view {
      padding: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;

      >view {
        display: flex;
        align-items: center;
        justify-content: space-between;

        >image {
          width: 44rpx;
          height: 44rpx;
        }
      }

      >text {
        margin-top: 30rpx;
        display: block;
        color: #000;
      }
    }
  }
}
</style>
